<template>
    <div class="yajin-list">
        <view class="list">
            <view v-for="(item, index) in list" :key="index" class="list-item">
                <view class="info">
                    <view class="amount">¥{{ item.payAmount }}</view>
                    <view class="remark">{{ item.remark }}</view>
                    <view class="time">{{ item.FCreateTime }}</view>
                </view>
                <view v-if="item.payStatus == '01'">
                    <button class="refund-btn" @click="handleRefund(item)">申请退款</button>
                </view>
            </view>
        </view>
    </div>
    <!-- 添加备注弹框 -->
    <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
            mode="input"
            title="申请退款"
            placeholder="请输入退款备注信息"
            :value="refundRemark"
            @confirm="confirmRefund"
            @close="closePopup"
        ></uni-popup-dialog>
    </uni-popup>
</template>

<script setup lang="ts">
import {ref, reactive } from "vue"
import { getDepositBreakHis, applyBeakRefund } from '@/api/order'
import { onLoad } from "@dcloudio/uni-app";
import interact from "@/utils/interact";

let orderNo = ''
onLoad((options: any) => {
    orderNo = options.orderNo
    getList()
})

const list = ref<any[]>([])
const getList = () => {
    getDepositBreakHis({
        orderNo: orderNo
    }).then(res => {
        list.value = res.data.list
    })
}

const popup = ref()
const refundRemark = ref('')
const currentItem = ref<any>(null)

const handleRefund = async (item: any) => {
    currentItem.value = item
    refundRemark.value = ''
    popup.value.open()
}

const closePopup = () => {
    popup.value.close()
    currentItem.value = null
    refundRemark.value = ''
}

const confirmRefund = async () => {
    if (!currentItem.value) return

    let action = await interact.modal({
        title: '提示',
        message: '确认申请退款吗？',
        showCancel: true,
    })
    if(!action.confirm) return;

    applyBeakRefund({
        breakId: currentItem.value.id,
        remark: refundRemark.value
    }).then(() => {
        interact.toast('提交成功')
        closePopup()
        getList()
    })
}
</script>
<style lang="scss" scoped>
.yajin-list {
    padding: 20rpx;

    .list-item {
        background: #fff;
        border-radius: 12rpx;
        padding: 24rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info {
            flex: 1;

            .amount {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 12rpx;
            }

            .remark {
                font-size: 28rpx;
                color: #666;
                margin-bottom: 8rpx;
            }

            .time {
                font-size: 24rpx;
                color: #999;
            }
        }

        .refund-btn {
            min-width: 140rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #ff6b6b;
            color: #fff;
            font-size: 26rpx;
            border-radius: 30rpx;
            padding: 0 20rpx;
            margin-left: 20rpx;
        }
    }
}
</style>
